<template>
    <div>
        <van-nav-bar
                :fixed="fixed"
                title="我的工资"
                left-text="返回"
                left-arrow
                @click-left="onClickLeft"
        />
        <div class="userBound">
            <div style="float: left;margin: 0 auto;width: 50%;padding: 20px">
                总奖金<span style="font-size: 18px;color: red;">{{sum}}</span>元
            </div>
            <div style="float: right;margin: 0 auto;width: 50%;padding: 20px;text-align: right">
                共充值<span style="font-size: 18px;color: red;">{{total}}</span>人
            </div>
        </div>
        <div v-if="list!=' '">
            <van-list
                    v-model="loading"
                    :finished="finished"
                    @load="onLoad"
                    :offset="10"
            >
                <ul v-for="(item,index) in list" :key="index" class="userinfo">
                    <van-cell-group>
                        <van-cell title="用户昵称" :value=item.user_nickname />
                        <van-cell title="用户ID"   :value=item.user_id />
                        <van-cell title="获得奖金"  :value=item.bonus_price />
                        <van-cell title="充值时间"  :value=formatTime(item.create_time) />
                    </van-cell-group>
                </ul>
            </van-list>
        </div>
        <div  class="user-null" v-if="list==' '">
            您还没有邀请用户，暂时没有奖金！
            <p>赶紧邀请用户赚取奖金吧！</p>
        </div>
        <div v-show="usershow" class="loading-no-more">
            我也是有底线的~~~~~~
        </div>
    </div>
</template>

<script>
    import { List } from 'vant';
    import Vue from 'vue'
    Vue.use(List);
    import {MeBonus} from "../api/data";
    export default {
       data(){
           return{
                page:1,
               fixed:true,
               sum:0,
               total:0,
               list:[],
               loading: false,
               finished: false,
               usershow:false
           }
       },
        methods:{
            formatTime(time) {
                let createDate = new Date();
                createDate.setTime(time * 1000);
                return createDate.format('yyyy-MM-dd hh:mm');
            },
            onLoad() {
                // 异步更新数据
                setTimeout(() => {
                    this.page++;
                    MeBonus(this.page).then(res=>{
                        var data = res.data.data.bonuses.data
                        for (var i=0;i<data.length;i++){
                            let date=[]
                            date['user_nickname'] = data[i].user.user_nickname
                            date['user_id']  = data[i].user_id
                            date['bonus_price'] = data[i].bonus_price+"元"
                            date['create_time'] = data[i].create_time
                            this.list.push(date)
                        }
                        // 加载状态结束
                        this.loading = false;
                        // 数据全部加载完成
                        if (data.length==0) {
                            this.usershow =true;
                            this.finished = true;
                        }
                    })
                }, 2000);
            },
            onClickLeft(){
                this.$router.back()
            }
        },
        mounted(){
            MeBonus(this.page).then(res=>{
                console.log(res.data.data.bonuses.data)
                this.sum = res.data.data.sum
                this.total = res.data.data.bonuses.total
                var data = res.data.data.bonuses.data

                for (var i=0;i<data.length;i++){
                    //console.log(data[0].user)
                    let _that = this
                        let date=[]
                        date['user_nickname'] = data[i].user.user_nickname
                        date['user_id']  = data[i].user_id
                        date['bonus_price'] = data[i].bonus_price+"元"
                        date['create_time'] = data[i].create_time
                        _that.list.push(date)
                }
            })
        }
    }
</script>

<style scoped>
    .user-null{
        width: 80%;
        margin: 0 auto;
        margin-top: 100px;
    }
    .span{
        margin-top: 10px;
        bottom: 0;
        line-height: 40px;
        height: 40px;
        width: 100%;
        text-align: center;
        background-color: #f9f9f9;
    }
    .userinfo{
        border-bottom: 10px solid #f9f9f9;
    }
    .userBound{
        margin-top: 46px;
        height: 60px;
        width: 100%;
        background-color: #f9f9f9;
        font-size: 16px;
    }
</style>